<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的主页</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="/Scripts/vue.min.js" type="text/javascript"></script>
	<link href="/Scripts/Vue.min.js"></script>
	<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
	<style type="text/css">
		body{
			background-color:#ECECEC;
		}
		.top-war{
		}
		
		.img-box{
		}
		
		.text-info h2{
			font-weight:900;
		}
		
		.text-info p{
			font-size:20px;
		}
		
		.war-nav-li{
			border-bottom: 2px solid red;
		}
	</style>
</head>

<body>
	<div class="topNav-warpper"></div>
	<div class="container col-lg-7 col-lg-offset-2" id="app" style="margin-top:80px;">
		<div class="top-war panel panel-info">
			<!--<div class="panel-heading">
				<h4>个人信息</h4>
			</div>-->
			<div class="row panel-body">
				<div class="img-box col-lg-offset-1 col-lg-2 ">
					<img class="img-responsive img-cion" v-bind:src="imgurl" alt="img-icon" width="128" height="128">
				</div>
				<div class="col-lg-offset-1 col-lg-6 text-info"><h2>{{name}}</h2><p>{{signature}}</p></div>
				<div>
					<button type="button" class="btn btn-primary" id="btn_edit" data-complete-text="Loading">
						编辑个人资料
					</button>
				</div>
			</div>
		</div>
		<div class="can-war panel panel-info">
			<!--<div class="panel-heading">
				<h4>个人兴趣</h4>
			</div>-->
			<div class="panel-body">
				<div class="war-nav">
					<nav class="navbar navbar-info" rol="navigation">
						<div class="container-fluid">
							<!--<div class="navbar-header">
								<a class="navbar-brand" href="#">个人空间</a>
							</div>-->	
							<div>
								<ul class="nav navbar-nav personal-ul">
									<li class="war-nav-li"><a href="#">动态</a></li>
									<li><a href="#">发帖</a></li>
									<li><a href="#">文章</a></li>
									<li><a href="#">提问</a></li>
									<li><a href="#">点赞</a></li>
									<li><a href="#">收藏</a></li>
									<li><a href="#">关注</a></li>
								</ul>
							</div>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</div>
	<script>
		//加载头部
		$(".topNav-warpper").load('/head/index.html',function(){
			console.log('topNav加载完毕');
		});

		$(function(){
			var Vm=new Vue({
				el:"#app",
				data:{
				   name:"",
				   signature:"",
				   imgurl:""
				}
			});
			
			$.ajax({
				type:'get',
				url:'/demo/checklogin.json',
				datatype:'json',
				data:'',
				success:function(data){
					console.log('请求成功');
					Vm.name=data.name;
					Vm.signature=data.signature;
					Vm.imgurl=data.imgurl;
				},
				error:function(jqXHR,text,errortext){
					console.log(text+errorText);
				}
			});
			
			$(".personal-ul li").click(function(){
				$(".war-nav-li").removeClass('war-nav-li');
				$(this).addClass('war-nav-li');
			});
			
			$("#btn_edit").click(function(){
				$(this).button('loading').delay('0').queue(function(){
					console.log('编辑个人资料');
					location.href='edit';
				});
			});
		});
		
		
	</script>
</body>
</html>
